<template>
  <div id="snake_list">
    <div class="current-player-panel">
      <div class="header-left">{{ currentPlayer.currIndex || 11 }} 名</div>
      <div class="header-right">
        <div style="color: red;">得分 {{ currentPlayer.score }}</div>
        <div> 击杀{{ currentPlayer.killQuantity }}</div>
      </div>
    </div>
    <ul>
      <li
        v-for="(data, i) in snakesGameRanking.slice(0,  currentPlayer.currIndex > 5 ? 5 : 6)"
        :key="i"
        :class="{ 'current-player': !data.isAi}"
      >
        <span>{{ i + 1 }} </span>
        <span>{{ data.name }}</span>
        <span>{{  data.score }}</span>
      </li>
      <li  v-if="currentPlayer.currIndex > 5" class="current-player">
        <span>{{ currentPlayer.currIndex }}</span>
        <span>我</span>
        <span></span>
      </li>
    </ul>
  </div>
</template>

<script>
import { snakesGameRanking } from '@/snake-js/SnakeManager'
export default {
  name: 'VGamingRanking',

  data() {
    return {
      snakesGameRanking: snakesGameRanking,
    };
  },
  computed: {
    currentPlayer() {
      const currIndex =this.snakesGameRanking.findIndex(item => !item.isAi)
      if(currIndex !== -1) {
        return {
          ...this.snakesGameRanking[currIndex],
          currIndex: currIndex + 1
        }
      }
      return {}
    }
  },
  mounted() {
    // console.log(SnakeManager.snakesGameRanking)
  },

  methods: {
    
  },
};
</script>

<style lang="scss">
#snake_list{
	position: absolute;
	top: 0;
	left: 0.1rem;
	padding: 0.8rem 0;
	width: 10rem;
	line-height: 1.5em;
	font-size: 0.6rem;
	list-style-type: none;
	background-color: rgba(0,0,0,0.15);
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.4);
  li{
    padding: 0 0.8rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
}
.current-player-panel {
  height: 2.4rem;
  width: 100%;
  display: flex;
  .header-left {
    width: 4rem;
    font-size: 1.4rem;
    line-height: 1.8rem;
    letter-spacing: -3px;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
  .header-right {
    width: 6rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
  }
}
.current-player {
  background-color: #ff000088;
  border-radius: 1.5rem;
}
</style>